<template>
  <view class="open-vip-card" :class="[customClass]">
    <swiper
      class="swiper"
      :indicator-dots="false"
      :autoplay="false"
      :next-margin="list.length > 1 ? '40rpx' : '24rpx'"
      :previous-margin="list.length > 1 ? '40rpx' : '24rpx'"
      @change="handleOnSwiperChange"
    >
      <swiper-item v-for="(item, index) in list" :key="item.id" @click="handleClick(item)">
        <view class="swiper-item" :style="[swiperItemStyle(index)]">
          <image class="card-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/open-vip-card.webp')" mode="" />
          <view class="w-full h-full relative z-10 px-20 pt-60">
            <view class="vip-name">{{ item.rule.title }}</view>
            <view class="flex items-center justify-between">
              <view class="flex font-32 font-bold tips-title">
                <text class="theme-text">购卡最高可省</text>
                <text class="text-price">{{ item.rule.savePrice | formatDigit }}元</text>
              </view>
              <view class="flex items-center">
                <text class="text-price text-price-small-before font-36 font-bold mr-10">{{ item.rule.discountPrice }}</text>
                <view class="bg-white radius-full relative">
                  <view v-if="discount" class="reduce-tag">本单立减{{ discount }}元</view>
                  <zm-checkbox round :value="item.id == ruleId" icon-size="38rpx" icon-color="#572E00" checked-icon-color="#572E00" @click="handleClick(item)"> </zm-checkbox>
                </view>
              </view>
            </view>
            <view class="flex items-center justify-between mt-6">
              <zm-icon-text
                name="arrow"
                :text="item.rule.subtitle"
                text-left
                text-size="22rpx"
                text-weight="500"
                color="#572E00"
                text-color="#572E00"
                @click.stop.native="handleClickDetail"
              ></zm-icon-text>
              <text v-show="item.rule.originalPrice" class="text-line-through font-22 font-500 theme-text mr-55">￥{{ item.rule.originalPrice }}</text>
            </view>
            <view class="flex items-center theme-text mt-20">
              <text class="font-20">开通会员代表接受</text>
              <text class="font-20 text-underline" @click.stop.native="handleClickAgreement">《会员服务协议》</text>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import weixin from "@/mixins/weixin.js"
export default {
  name: "open-vip-card",
  mixins: [weixin],
  props: {
    data: { type: Object, default: () => {} },
    ruleId: { type: String, default: "" },
    customClass: { type: String, default: "" }
  },
  data() {
    return {
      swiperIndex: 0
    }
  },
  computed: {
    list() {
      return this.data?.rule?.filter((item) => uni.$check.isNoEmpty(item?.rule)) || []
    },
    discount() {
      return this.data?.benefit?.firstDiscount?.rule?.discount || 0
    },
    swiperItemStyle() {
      return () => {
        const style = {}
        style.margin = "0 6rpx"
        if (this.list.length == 1) style.margin = "0"
        return style
      }
    }
  },
  methods: {
    handleClick(info) {
      this.$emit("check", info)
    },
    handleClickDetail() {
      uni.$toView({
        url: "pages/member/vip-equity-detail/vip-equity-detail",
        params: { vipLevel: 1, readOnly: true }
      })
    },
    handleClickAgreement() {
      this.$setCache("richtext", {
        title: "《会员服务协议》",
        content: this.data.agreement
      })
      uni.$toView("pages/utils/richtext/richtext")
    },
    handleOnSwiperChange({ detail }) {
      this.swiperIndex = detail.current
      this.$emit("change", this.data.rule[this.swiperIndex])
    }
  }
}
</script>

<style lang="scss" scoped>
.theme-text {
  color: #572e00;
}
.open-vip-card {
  flex: 1;
  overflow: hidden;
  .swiper {
    height: 220rpx;
    .swiper-item {
      height: 100%;
      position: relative;
      border-radius: 16rpx;
      background: linear-gradient(122deg, #fff3e5 0%, #fece97 100%);
      .card-bg {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
      }
      .vip-name {
        top: 0;
        left: 0;
        display: flex;
        height: 38rpx;
        color: #fff;
        padding: 0 20rpx;
        font-size: 22rpx;
        font-weight: 500;
        position: absolute;
        align-items: center;
        border-radius: 16rpx 0rpx 16rpx 0rpx;
        background: linear-gradient(120deg, #ae7555 0%, #572e00 100%);
      }
      .tips-title {
        position: relative;
        margin-top: -10rpx;
      }
      .reduce-tag {
        top: -50rpx;
        right: -5rpx;
        color: #fff;
        height: 38rpx;
        display: flex;
        font-size: 22rpx;
        padding: 0 15rpx;
        position: absolute;
        align-items: center;
        white-space: nowrap;
        border-radius: 22rpx;
        background: linear-gradient(301deg, #5b3204 0%, #ae7555 100%);
        &::after {
          width: 0;
          height: 0;
          content: "";
          right: 15rpx;
          bottom: -8rpx;
          position: absolute;
          border-top: 15rpx solid #5b3204;
          border-right: 15rpx solid transparent;
          border-left: 15rpx solid transparent;
        }
      }
    }
  }
}
</style>
